Vue.component('seller-list', {
    props: ['sellerInfo'],
    template: `<ul>
        <li class="seller-info" v-for="seller in sellerInfo">
            <!-- 商家图片 -->
            <div class="seller-image">
                <img :src="seller.image" alt="商家封面图片">
            </div>
            <!-- 商家简要信息述 -->
            <div class="seller-brief">
                <div class="seller-title">
                    <span>{{seller.name}}</span>
                    <span class="self-taking" v-if="seller.pickup">支持自取</span>
                </div>
                <!-- 评价/月售/时间/距离 -->
                <div class="seller-evaluation">
                    <div>
                        <div class="evaluation">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star-half-o"></i>
                        </div>
                        <div class="month-sale">月售{{seller.salesCount}}</div>
                    </div>
                    <div>
                        <div class="time-used">{{seller.timeUsed}}分钟</div>
                        <div>&nbsp;|&nbsp;</div>
                        <div class="month-sale">{{seller.distance}}km</div>
                    </div>
                </div>
                <!-- 其它费用 -->
                <div class="other-expend">
                    <div class="begin-price">起送 ￥{{seller.startFee}}</div>
                    <div>&nbsp;|&nbsp;</div>
                    <div class="freight-price">配送 ￥{{seller.transportFee}}</div>
                </div>
                <!-- 商家活动 -->
                <div class="activities" v-html="seller.activities"></div>
            </div>
        </li>
    </ul>`
});